<!--
 * @Author: your name
 * @Date: 2021-07-13 15:55:30
 * @LastEditTime: 2021-07-26 16:08:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /shb-pc-fe/src/component/form/components/FormText/extend/ProductMenuSetting.vue
-->
<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <h3 class="form-setting-panel-title">{{ field.displayName }}</h3>
    <!-- end 标题 -->
    <p class="form-design-warning" v-if="initData.openSuperCodePro">
      {{$t('common.form.preview.relatedCatalog.des2')}}
    </p>
    <p class="form-design-warning" v-else>
      {{$t('common.form.tip.systemTemplateTips')}}
    </p>

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- end 描述信息 -->
    <div class="form-setting-group">
      <el-checkbox
        :value="field.isNull"
        @input="update($event, 'isNull')"
        :true-label="0"
        :false-label="1"
        >{{$t('common.base.isRequire')}}</el-checkbox
      >
      <div class="form-setting-content" v-if="initData.openSuperCodePro">
        <span>{{$t('common.form.preview.relatedCatalog.des3')}}</span>
        <!-- <span v-if="initData.openSuperCodePro">功能升级为独立模块，功能位置：产品管理-产品类型，或点击</span> -->
        <!-- <span v-else>功能升级为独立模块，功能位置：产品管理设置，或点击</span> -->
        <span
          class="setting-link"
          @click="openTab()"
          >{{$t('common.base.toSet')}}</span
        >
      </div>
    </div>

    <setting-option
      v-if="!initData.openSuperCodePro"
      :useIdAsKey="true"
      :field="field"
      :update="update"
      @input="optionsInput"
      :hasMultiControl="false"
      :needPatchAdd="true"
      :propOptions="productMenuOptions">
    </setting-option>
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting'
import { settingProps } from '@src/component/form/components/props'

import SettingOption from './SettingOptions'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { openAccurateTab } from '@src/util/platform'
export default {
  name: 'product-catalogId-setting',
  mixins: [SettingMixin],
  components: {
    [SettingOption.name]: SettingOption
  },
  props: {
    ...settingProps
  },
  inject: ['productMenuOptions'],
  computed: {
    isSystem() {
      return this.field.isSystem === 1
    },
    initData(){
        return JSON.parse(window._init || '{}')
    }
  },
  methods: {
    optionsInput(value) {
      if (value.prop === 'options') {
        this.productMenuOptions.value = value.value
      } else {
        this.$emit('input', value)
      }
    },
    updateForDom(event) {
      let el = event.target
      let prop = el.dataset.prop
      let value = el.value

      this.update(value, prop)
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', { value, prop, isSetting })
    },
    openTab() {
      if (this.initData?.openSuperCodePro) {
        if (this.initData?.auths?.PRODUCT_CATALOG_VIEW) {
          // this.$platform.openTab({
          //   id: 'productCatalog',
          //   title: '产品类型列表',
          //   close: true,
          //   url: '/productV2/catalog/list',
          //   reload: true,
          // })

          openAccurateTab({
            type:PageRoutesTypeEnum.PageProductCatalogList,
            reload: true,
          })
        } else {
          this.$platform.alert(this.$t('common.base.notAlowToView'))
        }
      } else {
        if (this.initData?.auths?.SYSTEM_SEETING) {
          let fromId = window.frameElement.getAttribute('id')
          // this.$platform.openTab({
          //   id: 'productType',
          //   title: '产品管理设置',
          //   close: true,
          //   url: '/setting/product/productType',
          //   reload: true,
          //   fromId
          // })
          openAccurateTab({
            type: PageRoutesTypeEnum.PageProductTypeSetting,
            reload: true,
            fromId
          })
        }else{
          this.$platform.alert(this.$t('common.base.notAlowToView'))
        }
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.form-setting-content {
  margin-top: 20px;
  color:#999;
  font-size: 12px;
  .setting-link {
    cursor: pointer;
    color: $color-primary-light-6;
  }
}
</style>
